<template>
  <div class="activity">
    <div class="banner flexc">
      <img src="@/assets/img/activity/media/banner-word1.png"
        v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
      <img src="@/assets/img/activity/media/banner-word.png" v-else style="width: 1000px;">
    </div>
    <div class="step">
      <img src="@/assets/img/activity/media/step-cn.png"
        v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
      <img src="@/assets/img/activity/media/step-en.png" v-else>
      <!-- <div class="container flex">
        <div>
          <p>下载钱包</p>
          <p>(12/17-12/19)</p>
        </div>
        <div>
          <p>创建EOS账户</p>
          <p>(12/17-12/19)</p>
        </div>
        <div>
          <p>空投糖果</p>
          <p>(12/20)</p>
        </div>
        <div>
          <p>体验糖果变现</p>
          <p>(12/21-12/24)</p>
        </div>
      </div> -->
    </div>
    <div class="activity-content">
      <div class="activity-one">
        <div class="activity-one-caption">
          <i class="number-one"></i>
          <h2>{{$t('activity.Media')}}</h2>
          <p>{{$t('activity.Media1')}}</p>
        </div>
        <div class="activity-one-content">
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity')}}
            </span>
            <span>{{$t('activity.activityContent')}}</span>
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity1')}}
            </span>
            <span>{{$t('activity.activity1Content1')}}</span>
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity2')}}
            </span>
            <span>
              <ul>
                <li>{{$t('activity.activity2Content1')}}</li>
                <li>{{$t('activity.activity2Content2')}}</li>
                <li>{{$t('activity.activity2Content3')}}</li>
                <li>{{$t('activity.activity2Content4')}}</li>
              </ul>
            </span>
          </p>
          <p>
            <span class="color-blue" style="text-indent: 3em;"
              :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px; text-indent: 5.3em;' : ''">
              {{$t('activity.activity3')}}
            </span>
            <span class="color-blue">
              <ul>
                <li>{{$t('activity.activity3Content1')}}</li>
                <li>{{$t('activity.activity3Content2')}}</li>
                <li>{{$t('activity.activity3Content3')}}</li>
              </ul>
            </span>
          </p>
          <p>
            <span>{{$t('activity.activity4')}}</span>
            <span>{{$t('activity.activity4Content1')}}</span>
          </p>
          <p style="font-weight: bold;">{{$t('activity.activity5')}}</p>
        </div>
      </div>
      <div class="activity-enter-wrap">
        <div class="activity-enter flexb">
          <div class="tp">
            <img src="@/assets/img/activity/media/ewm1.png" alt="">
            <a href="https://ndx.340wan.com/static/activity/media/tp-pdf.pdf?v=1.1"
              target="_blank"
              v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
              <img src="@/assets/img/activity/media/tp.png" alt="">
            </a>
            <a href="https://ndx.340wan.com/static/activity/media/tp-pdf-en.pdf"
              target="_blank"
              v-else>
              <img src="@/assets/img/activity/media/tp.png" alt="">
            </a>
            <span class="color-blue">{{$t('activity.create')}}</span>
          </div>
          <div class="activity-enter-btn">
            <i class="iconfont icon-zuo1"></i>
            <span>{{$t('activity.activityEnter')}}</span>
            <i class="iconfont icon-you1"></i>
          </div>
          <div class="meetone">
            <img src="@/assets/img/activity/media/ewm2.jpg" alt="">
            <a href="https://ndx.340wan.com/static/activity/media/meetone-pdf.pdf?v=1.1"
              v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'"
              target="_blank">
              <img src="@/assets/img/activity/media/meetone.png" alt="">
            </a>
            <a href="https://ndx.340wan.com/static/activity/media/meetone-pdf-en.pdf"
              v-else
              target="_blank">
              <img src="@/assets/img/activity/media/meetone.png" alt="">
            </a>
            <p class="color-blue">{{$t('activity.create')}}</p>
          </div>
        </div>
        <div class="activity-enter flexb">
          <div class="tp btp">
            <img src="@/assets/img/activity/media/ewm-btp.png" alt="">
            <a href="https://bitpie.com/" target="_blank">
              <img src="@/assets/img/activity/media/logo-btp.png" alt="">
            </a>
          </div>
          <div class="activity-enter-btn">
            <i class="iconfont icon-zuo1"></i>
            <span>{{$t('activity.activityEnter')}}</span>
            <i class="iconfont empty"></i>
          </div>
          <div class="more-wallet">
            {{$t('activity.moreWallets')}}
          </div>
        </div>
      </div>
      <div class="activity-project">
        <h2 class="activity-project-caption">{{$t('activity.project')}}</h2>
        <div class="activity-project-content">
          <ul class="clearfix">
            <li v-for="(item, index) in list" :key="index">
              <img alt="" :src="item.imgUrl">
              <p>{{$t(`activity.${item.coinName}`)}}</p>
              <p>1 {{item.coin}} = {{item.price}} EOS</p>
              <p>{{$t('activity.Newdex')}}</p>
              <p>{{$t(`activity.${item.coinTip}`)}}</p>
              <span @click="handleJump(item.eos)">{{$t('activity.trade')}}</span>
            </li>
          </ul>
          <div class="activity-project-btn" @click="handleJump(1)">{{$t('activity.more')}}</div>
        </div>
      </div>
      <div class="activity-one">
        <div class="activity-one-caption">
          <i class="number-one number-two"></i>
          <h2>{{$t('activity.Media2')}}</h2>
          <p>{{$t('activity.Media3')}}</p>
        </div>
        <div class="activity-one-content">
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity')}}
            </span>
            <span>{{$t('activity.stepTwoTime')}}</span>
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity1')}}
            </span>
            <span>{{$t('activity.stepTwoContent')}}</span>
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.activity2')}}
            </span>
            <span>{{$t('activity.stepTwoLc')}}</span>
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.stepTwoZcCap')}}
            </span>
            <img src="@/assets/img/activity/media/icon.png" alt="" style="vertical-align: middle;">
          </p>
          <p style="font-weight: bold;">{{$t('activity.activity5')}}</p>
        </div>
      </div>
      <div class="activity-partner">
        <h2>{{$t('activity.partners')}}</h2>
        <div class="activity-partner-content">
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.organizers')}}
            </span>
            <img style="width: 53.2%;" src="@/assets/img/activity/media/media1.png?v=1.5" alt="">
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.CoOrganizers')}}
            </span>
            <img src="@/assets/img/activity/media/media2.png?v=1.5" alt="">
          </p>
          <!-- <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.invitedMedia')}}
            </span>
            <img style="width: 13%;" src="@/assets/img/activity/media/media3.png" alt="">
          </p> -->
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.supportingWallet')}}
            </span>
            <img src="@/assets/img/activity/media/media4.png?v=1.5" alt="">
          </p>
          <p>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 120px' : ''">
              {{$t('activity.supportingMedia')}}
            </span>
            <img src="@/assets/img/activity/media/media5.png?v=1.5" alt="">
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        coinName: 'ECTT',
        coin: 'ECTT',
        coinTip: 'ECTTTip',
        imgUrl: 'https://ndi.340wan.com/image/ectchaincoin-ectt.png',
        price: '0.004794',
        eos: 'ectchaincoin-ectt-eos'
      }, {
        coinName: 'EOSBLACK',
        coin: 'BLACK',
        coinTip: 'EOSBLACKTip',
        imgUrl: 'https://ndi.340wan.com/image/eosblackteam-black.png',
        price: '0.01595',
        eos: 'eosblackteam-black-eos'
      }, {
        coinName: 'TokenPlanets',
        coin: 'TKC',
        coinTip: 'TokenPlanetsTip',
        imgUrl: 'https://ndi.340wan.com/image/tkcointkcoin-tkc.png',
        price: '0.001051',
        eos: 'tkcointkcoin-tkc-eos'
      }, {
        coinName: 'Everipedia',
        coin: 'IQ',
        coinTip: 'EveripediaTip',
        imgUrl: 'https://ndi.340wan.com/image/everipediaiq-iq.png',
        price: '0.001295',
        eos: 'everipediaiq-iq-eos'
      }, {
        coinName: 'HireVibes',
        coin: 'HVT',
        coinTip: 'HireVibesTip',
        imgUrl: 'https://ndi.340wan.com/image/hirevibeshvt-hvt.png',
        price: '0.00120',
        eos: 'hirevibeshvt-hvt-eos'
      }, {
        coinName: 'Prospectors',
        coin: 'PGL',
        coinTip: 'ProspectorsTip',
        imgUrl: 'https://ndi.340wan.com/image/prospectorsg-pgl.png',
        price: '0.0599',
        eos: 'prospectorsg-pgl-eos'
      }, {
        coinName: 'KARMA',
        coin: 'KARMA',
        coinTip: 'KARMATip',
        imgUrl: 'https://ndi.340wan.com/image/therealkarma-karma.png',
        price: '0.000289',
        eos: 'therealkarma-karma-eos'
      }, {
        coinName: 'BOID',
        coin: 'BOID',
        coinTip: 'BOIDTip',
        imgUrl: 'https://ndi.340wan.com/image/boidcomtoken-boid.png',
        price: '0.0001002',
        eos: 'boidcomtoken-boid-eos'
      }, {
        coinName: 'eosLITE',
        coin: 'LITE',
        coinTip: 'eosLITETip',
        imgUrl: 'https://ndi.340wan.com/image/buildertoken-lite.png',
        price: '0.00000188',
        eos: 'buildertoken-lite-eos'
      }, {
        coinName: 'SHARE',
        coin: 'SHARE',
        coinTip: 'SHARETip',
        imgUrl: 'https://ndi.340wan.com/image/share.x-share.png',
        price: '0.00000132',
        eos: 'share.x-share-eos'
      }],
    };
  },
  watch: {
  },
  components: {
  },
  methods: {
    handleJump(tradRouterParams) {
      if (tradRouterParams === 1) {
        this.$router.push({ name: 'market' });
      } else {
        this.$router.push({
          path: `/trade/${tradRouterParams}`
        });
      }
    },
  },
  mounted() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
};
</script>

<style lang="scss" scoped>
$-background: rgb(8, 12, 39);
$-color: #278EDA;
.fontBold {
  font-weight: bold !important;
  color: #000 !important;
}
.color-blue {
  color: $-color !important;
}
.activity {
  background: $-background;
  color: #fff;
  margin-bottom: -5px;
  .banner {
    // position: relative;
    width: 100%;
    height: 666px;
    background: url('../../../assets/img/activity/media/banner.jpeg?v=1.1') no-repeat;
    background-size: cover;
    img {
      // position: absolute;
      // top: 50%;
      // left: 50%;
      width: 900px;
      // transform: translate(-50%, -50%);
    }
  }
  .step {
    padding-top: 20px;
    margin-bottom: 70px;
    img {
      width: 100%;
    }
  }
  .activity-content {
    margin: 0 auto;
    width: 1260px;
    .activity-one {
      .activity-one-caption {
        position: relative;
        text-align: center;
        padding: 110px 0 60px 0;
        i {
          position: absolute;
          left: 50%;
          top: 0;
          width: 80px;
          height: 200px;
          transform: translate(-50%);
          background: url('../../../assets/img/activity/media/step-one.png') no-repeat;
          background-size: contain;
        }
        .number-two {
          top: 75px;
          height: 200px;
          background: url('../../../assets/img/activity/media/step-two.png') no-repeat;
          background-size: contain;
        }
        h2 {
          font-size: 40px;
        }
        p {
          font-size: 16px;
          margin-top: 10px;
        }
      }
      .activity-one-content {
        width: 100%;
        background: #fff;
        padding: 70px 0 50px 195px;
        p {
          margin-bottom: 30px;
          color: #000;
        }
        span {
          font-size: 14px;
          display: inline-block;
        }
        span:nth-child(1) {
          font-weight: bold;
          vertical-align: top;
          width: 90px;
          color: #000;
        }
        span:nth-child(2) {
          color: #515151;
          width: 850px;
          li {
            line-height: 24px;
          }
        }
      }
    }
    .activity-enter-wrap {
      padding: 64px 180px 40px;
      .activity-enter:nth-child(1) {
        margin-bottom: 50px;
      }
      .activity-enter {
        text-align: center;
        .activity-enter-btn {
          .empty {
            display: inline-block;
            width: 28px;
            height: 16px;
          }
          span  {
            padding: 8px 20px;
            border-radius: 20px;
            border: 1px solid #AAB6D6;
          }
          i {
            color: #AAB6D6;
          }
        }
        .more-wallet {
          width: 190px;
          height: 190px;
          background: rgba(255, 255, 255, 0.2);
          text-align: center;
          line-height: 190px;
        }
        .meetone, .tp {
          img:nth-child(1) {
            display: block;
            width: 130px;
            margin: 0 auto;
          }
          a {
            img:nth-child(1) {
              display: block;
              width: 190px;
              height: 44px;
              margin: 20px 0 10px 0;
              padding: 10px 15px;
              border-radius: 20px;
              border: 1px solid #fff;
            }
          }
        }
        .meetone {
          a {
            img:nth-child(1) {
              padding: 5px 35px;
            }
          }
        }
        .btp {
          a {
            img:nth-child(1) {
              padding: 9px 46px;
            }
          }
        }
      }
    }
    .activity-project {
      padding-top: 20px;
      .activity-project-caption {
        text-align: center;
        font-size: 36px;
        margin-bottom: 20px;
      }
      .activity-project-content {
        .activity-project-btn {
          font-size: 16px;
          width: 185px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          // padding: 20px 30px;
          margin: 20px auto;
          background: #31B5FF;
          color: #fff;
          border-radius: 20px;
          box-shadow: 0 10px 10px #000;
          cursor: pointer;
        }
        li {
          float: left;
          width: 19.6%;
          padding: 20px 15px;
          text-align: center;
          color: #000;
          background: #fff;
          margin: 0 5px 5px 0;
          img {
            display: block;
            margin: 0 auto;
            width: 70px;
            height: 70px;
            padding: 5px;
            border-radius: 50%;
            border-color: rgb(172, 181, 211);
            border-style: solid;
            border-width: 1px;
          }
          p:nth-child(2) {
            font-size: 14px;
            margin: 15px 0 10px 0;
            line-height: 16px;
          }
          p:nth-child(3) {
            font-size: 14px;
            height: 20px;
            overflow: hidden;
          }
          p:nth-child(4) {
            font-size: 12px;
            color: #666;
            margin: 0 0 10px 0;
          }
          p:nth-child(5) {
            font-size: 14px;
            color: #515151;
            height: 60px;
          }
          span {
            display: block;
            width: 91px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            margin: 20px auto 0;
            background: #31B5FF;
            color: #fff;
            border-radius: 20px;
            box-shadow: 0 10px 10px #99999973;
            cursor: pointer;
          }
        }
        li:nth-child(5n+5) {
          margin-right: 0;
        }
      }
    }
    .activity-partner {
      padding: 80px 30px 50px;
      h2 {
        font-size: 40px;
        text-align: center;
        margin-bottom: 50px;
      }
      p {
        margin-bottom: 30px;
        span {
          display: inline-block;
          vertical-align: top;
          width: 90px;
          color: #fff
        }
        img {
          width: 80%;
        }
      }
    }
  }
}
</style>
